<template>
  <view :class="'active-area ' + type">
    <view class="a-header">
      <slot name="header"></slot>
    </view>
    <view class="public-class a-main">
      <slot name="main-header"></slot>
      <view v-if="type == 'hot'">
        <goods-like :list="lists"></goods-like>
      </view>
      <scroll-view v-else-if="type=='new'" style="white-space: nowrap;" scroll-x="true" scroll-with-animation="true">
        <navigator v-for="(item, index) in lists" :key="index"
                   :style="{background: type == 'seckill' && '#f8f8f8'}" class="goods-item" hover-class="none"
                   :url="'/pages/goods_details/goods_details?id=' + item.id">
            <custom-image width="212rpx" height="180rpx" radius="10rpx" lazy-load :src="item.image" :customStyle="{display: 'inline-block', verticalAlign: 'top'}">
            </custom-image>
            <view style="margin: 0;padding:0 20rpx;display:inline-block;vertical-align: top; line-height: 45rpx;">
              <view class="goods-name line1">{{ item.name }}</view>
              <view class="info-remark">{{ item.remark }}</view>
              <view class="text-btn">已售：{{ item.sales_sum }}</view>
              <view class="row wrap price-row">
                <price-format class="mr10 price-goods" :weight="700" :price="item.seckill_price || item.price" :first-size="34"
                              :second-size="22" :subscript-size="22" color="#fa4000"></price-format>
                <view class="icon-add"><u-icon name="plus-circle-fill" size="60" color="#2d6af4"></u-icon></view>
              </view>
            </view>
        </navigator>
      </scroll-view>
      <view v-else >
        <navigator v-for="(item, index) in lists" :key="index"
                    class="article-item" hover-class="none"
                   :url="'/pages/news_details/news_details?id=' + item.id">
          <view class="article-title"> <image src="/static/images/icon_article.png" class="icon-article"></image> {{ item.title }}</view>
          <view class="article-desc">{{ item.synopsis }}</view>
          <view class="article-time"><u-icon name="clock" size="24" style="margin-right: 5rpx"></u-icon>{{ item.create_time }}</view>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
import {
  trottle,
  getRect
} from "@/utils/tools";

export default {
  data() {
    return {
      currentSwiper: 0,
    };
  },

  components: {},
  props: {
    type: {
      type: String,
      default: ''
    },
    lists: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    "lists": function (value) {
      if (!value) {
        return;
      }
    }
  },

  beforeMount: function () {

  },
  destroyed: function () {
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.active-area {
  background-repeat: no-repeat;
  background-size: 100% auto;
  border-radius: 10rpx;
  padding-bottom: 20rpx;

  &.seckill {
    background-color: $-color-white;
    background-image: url(../../static/images/home_seckill_bg.png);
  }

  .a-main {
    position: relative;
    box-sizing: border-box;

    .goods-item {
      //width: 240rpx;
      margin-left: 16rpx;
      margin-bottom: 20rpx;
      border-radius: 10rpx;
      overflow: hidden;

      &:first-of-type {
        margin-left: 20rpx;
      }

      &:last-of-type {
        margin-right: 20rpx;
      }
    }
  }
}
.goods-name{
  font-size: 32rpx;
  color: #222222;
  font-weight:bold;
  margin-bottom: 10rpx;
}
.info-remark{
  color: #9d9d9d;
  height: 35rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 440rpx; /* 根据实际需要调整 */
  margin-bottom: 10rpx;
}
.article-title{
  font-size: 32rpx;
  color: #222222;
  font-weight:bold;
  line-height: 1.5;
  margin-bottom: 10rpx;
  overflow: hidden;
}
.article-title {
  display: flex;
  align-items: flex-start; // 顶部对齐

  .icon-article {
    width: 34rpx;
    height: 34rpx;
    margin-right: 10rpx;
    flex-shrink: 0;
    margin-top: 4rpx; // 微调垂直位置以匹配文字
  }
}
.article-item{
  background: #f7fcff;
  padding: 20rpx;
  margin: 0 20rpx 20rpx;

  border-radius: 10rpx;
}
.article-desc,.article-time{
  font-size: 24rpx;
  color: #9d9d9d;
  margin-left: 40rpx;
  margin-top: 10rpx;
}

/* 在现有样式基础上添加 */
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-add {
  display: flex;
  flex-shrink: 0;
}
</style>
